{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<!--BOOK_INFORMATION-->\n",
    "<a href=\"https://user-images.githubusercontent.com/19553554/71825144-2d568180-30d6-11ea-8ee0-63c849cfd934.png\" target=\"_blank\"><img align=\"left\" style=\"width: 76px; height: 100px; background: white; padding: 1px; border: 1px solid black; margin-right:10px;\"></a>\n",
    "*pyecharts 是一个用于生成 Echarts 图表的类库。Echarts 是百度开源的一个数据可视化 JS 库。用 Echarts 生成的图可视化效果非常棒，为了与 Python 进行对接，方便在 Python 中直接使用数据生成图，于是有人开发出了这个项目[GitHub](https://github.com/pyecharts/pyecharts) .*\n",
    "\n",
    "*Note.建议本程序在参看https://github.com/pyecharts/pyecharts 的安装步骤后再运行； 本程序所有的例子都是从官方提供的样例代码[GitHub](https://github.com/pyecharts/pyecharts-gallery)中提取的,如果对某个API有疑问建议在IDE里面查看*\n",
    "\n",
    "*Echart类型图种大全:https://echarts.apache.org/examples/zh/#chart-type-line pyecharts图导入到ppt中的方法:https://baijiahao.baidu.com/s?id=1663839456876951842&wfr=spider&for=pc.*\n",
    "\n",
    "*作者: LBQ; 时间:2020/7/24. 邮箱:779660843@qq.com*"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# XIX.流体图(Liquid)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 基础示例"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts':'https://assets.pyecharts.org/assets/echarts.min', 'echarts-liquidfill':'https://assets.pyecharts.org/assets/echarts-liquidfill.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "\n",
       "        <div id=\"76f7514b77784545b5f109e9d77fe523\" style=\"width:900px; height:500px;\"></div>\n",
       "\n",
       "<script>\n",
       "        require(['echarts', 'echarts-liquidfill'], function(echarts) {\n",
       "                var chart_76f7514b77784545b5f109e9d77fe523 = echarts.init(\n",
       "                    document.getElementById('76f7514b77784545b5f109e9d77fe523'), 'white', {renderer: 'canvas'});\n",
       "                var option_76f7514b77784545b5f109e9d77fe523 = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\"\n",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"liquidFill\",\n",
       "            \"name\": \"lq\",\n",
       "            \"data\": [\n",
       "                0.6,\n",
       "                0.7\n",
       "            ],\n",
       "            \"waveAnimation\": true,\n",
       "            \"animationDuration\": 2000,\n",
       "            \"animationDurationUpdate\": 1000,\n",
       "            \"color\": [\n",
       "                \"#294D99\",\n",
       "                \"#156ACF\",\n",
       "                \"#1598ED\",\n",
       "                \"#45BDFF\"\n",
       "            ],\n",
       "            \"shape\": \"circle\",\n",
       "            \"backgroundStyle\": {},\n",
       "            \"outline\": {\n",
       "                \"show\": true,\n",
       "                \"borderDistance\": 8\n",
       "            },\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"inside\",\n",
       "                \"margin\": 8,\n",
       "                \"fontSize\": 50\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [],\n",
       "            \"selected\": {},\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Liquid-\\u57fa\\u672c\\u793a\\u4f8b\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_76f7514b77784545b5f109e9d77fe523.setOption(option_76f7514b77784545b5f109e9d77fe523);\n",
       "        });\n",
       "    </script>\n"
      ],
      "text/plain": [
       "<pyecharts.render.display.HTML at 0x7f5ec81fb2e8>"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from pyecharts import options as opts\n",
    "from pyecharts.charts import Liquid\n",
    "\n",
    "c = (\n",
    "    Liquid()\n",
    "    .add(\"lq\", [0.6, 0.7])\n",
    "    .set_global_opts(title_opts=opts.TitleOpts(title=\"Liquid-基本示例\"))\n",
    "    #.render(\"liquid_base.html\")\n",
    ")\n",
    "c.load_javascript()\n",
    "c.render_notebook()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 百分比显示"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts':'https://assets.pyecharts.org/assets/echarts.min', 'echarts-liquidfill':'https://assets.pyecharts.org/assets/echarts-liquidfill.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "\n",
       "        <div id=\"ed92ec72bf544e7c974e22d5b3d9c2c8\" style=\"width:900px; height:500px;\"></div>\n",
       "\n",
       "<script>\n",
       "        require(['echarts', 'echarts-liquidfill'], function(echarts) {\n",
       "                var chart_ed92ec72bf544e7c974e22d5b3d9c2c8 = echarts.init(\n",
       "                    document.getElementById('ed92ec72bf544e7c974e22d5b3d9c2c8'), 'white', {renderer: 'canvas'});\n",
       "                var option_ed92ec72bf544e7c974e22d5b3d9c2c8 = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\"\n",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"liquidFill\",\n",
       "            \"name\": \"lq\",\n",
       "            \"data\": [\n",
       "                0.5254\n",
       "            ],\n",
       "            \"waveAnimation\": true,\n",
       "            \"animationDuration\": 2000,\n",
       "            \"animationDurationUpdate\": 1000,\n",
       "            \"color\": [\n",
       "                \"#294D99\",\n",
       "                \"#156ACF\",\n",
       "                \"#1598ED\",\n",
       "                \"#45BDFF\"\n",
       "            ],\n",
       "            \"shape\": \"circle\",\n",
       "            \"backgroundStyle\": {},\n",
       "            \"outline\": {\n",
       "                \"show\": true,\n",
       "                \"borderDistance\": 8\n",
       "            },\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"inside\",\n",
       "                \"margin\": 8,\n",
       "                \"fontSize\": 50,\n",
       "                \"formatter\": function (param) {                    return (Math.floor(param.value * 10000) / 100) + '%';                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [],\n",
       "            \"selected\": {},\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Liquid-\\u6570\\u636e\\u7cbe\\u5ea6\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_ed92ec72bf544e7c974e22d5b3d9c2c8.setOption(option_ed92ec72bf544e7c974e22d5b3d9c2c8);\n",
       "        });\n",
       "    </script>\n"
      ],
      "text/plain": [
       "<pyecharts.render.display.HTML at 0x7f5ec81aab70>"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from pyecharts import options as opts\n",
    "from pyecharts.charts import Liquid\n",
    "from pyecharts.commons.utils import JsCode\n",
    "\n",
    "c2 = (\n",
    "    Liquid()\n",
    "    .add(\n",
    "        \"lq\",\n",
    "        [0.5254],\n",
    "        label_opts=opts.LabelOpts(\n",
    "            font_size=50,\n",
    "            formatter=JsCode(\n",
    "                \"\"\"function (param) {\n",
    "                    return (Math.floor(param.value * 10000) / 100) + '%';\n",
    "                }\"\"\"\n",
    "            ),\n",
    "            position=\"inside\",\n",
    "        ),\n",
    "    )\n",
    "    .set_global_opts(title_opts=opts.TitleOpts(title=\"Liquid-数据精度\"))\n",
    "    #.render(\"liquid_data_precision.html\")\n",
    ")\n",
    "c2.load_javascript()\n",
    "c2.render_notebook()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 箭头样式"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts':'https://assets.pyecharts.org/assets/echarts.min', 'echarts-liquidfill':'https://assets.pyecharts.org/assets/echarts-liquidfill.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "\n",
       "        <div id=\"e6d6b6cda1094e7bbf7d5b54c094a1af\" style=\"width:900px; height:500px;\"></div>\n",
       "\n",
       "<script>\n",
       "        require(['echarts', 'echarts-liquidfill'], function(echarts) {\n",
       "                var chart_e6d6b6cda1094e7bbf7d5b54c094a1af = echarts.init(\n",
       "                    document.getElementById('e6d6b6cda1094e7bbf7d5b54c094a1af'), 'white', {renderer: 'canvas'});\n",
       "                var option_e6d6b6cda1094e7bbf7d5b54c094a1af = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\"\n",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"liquidFill\",\n",
       "            \"name\": \"lq\",\n",
       "            \"data\": [\n",
       "                0.3,\n",
       "                0.7\n",
       "            ],\n",
       "            \"waveAnimation\": true,\n",
       "            \"animationDuration\": 2000,\n",
       "            \"animationDurationUpdate\": 1000,\n",
       "            \"color\": [\n",
       "                \"#294D99\",\n",
       "                \"#156ACF\",\n",
       "                \"#1598ED\",\n",
       "                \"#45BDFF\"\n",
       "            ],\n",
       "            \"shape\": \"arrow\",\n",
       "            \"backgroundStyle\": {},\n",
       "            \"outline\": {\n",
       "                \"show\": false,\n",
       "                \"borderDistance\": 8\n",
       "            },\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"inside\",\n",
       "                \"margin\": 8,\n",
       "                \"fontSize\": 50\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [],\n",
       "            \"selected\": {},\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Liquid-Shape-arrow\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_e6d6b6cda1094e7bbf7d5b54c094a1af.setOption(option_e6d6b6cda1094e7bbf7d5b54c094a1af);\n",
       "        });\n",
       "    </script>\n"
      ],
      "text/plain": [
       "<pyecharts.render.display.HTML at 0x7f5ec81beeb8>"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from pyecharts.globals import SymbolType\n",
    "\n",
    "c3 = (\n",
    "    Liquid()\n",
    "    .add(\"lq\", [0.3, 0.7], is_outline_show=False, shape=SymbolType.ARROW)#\n",
    "    .set_global_opts(title_opts=opts.TitleOpts(title=\"Liquid-Shape-arrow\"))\n",
    "    #.render(\"liquid_shape_arrow.html\")\n",
    ")\n",
    "c3.load_javascript()\n",
    "c3.render_notebook()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 钻石样式"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts':'https://assets.pyecharts.org/assets/echarts.min', 'echarts-liquidfill':'https://assets.pyecharts.org/assets/echarts-liquidfill.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "\n",
       "        <div id=\"f00e1288591b4b4aa3f5c65f24b48f46\" style=\"width:900px; height:500px;\"></div>\n",
       "\n",
       "<script>\n",
       "        require(['echarts', 'echarts-liquidfill'], function(echarts) {\n",
       "                var chart_f00e1288591b4b4aa3f5c65f24b48f46 = echarts.init(\n",
       "                    document.getElementById('f00e1288591b4b4aa3f5c65f24b48f46'), 'white', {renderer: 'canvas'});\n",
       "                var option_f00e1288591b4b4aa3f5c65f24b48f46 = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\"\n",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"liquidFill\",\n",
       "            \"name\": \"lq\",\n",
       "            \"data\": [\n",
       "                0.3,\n",
       "                0.7\n",
       "            ],\n",
       "            \"waveAnimation\": true,\n",
       "            \"animationDuration\": 2000,\n",
       "            \"animationDurationUpdate\": 1000,\n",
       "            \"color\": [\n",
       "                \"#294D99\",\n",
       "                \"#156ACF\",\n",
       "                \"#1598ED\",\n",
       "                \"#45BDFF\"\n",
       "            ],\n",
       "            \"shape\": \"diamond\",\n",
       "            \"backgroundStyle\": {},\n",
       "            \"outline\": {\n",
       "                \"show\": false,\n",
       "                \"borderDistance\": 8\n",
       "            },\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"inside\",\n",
       "                \"margin\": 8,\n",
       "                \"fontSize\": 50\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [],\n",
       "            \"selected\": {},\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Liquid-Shape-Diamond\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_f00e1288591b4b4aa3f5c65f24b48f46.setOption(option_f00e1288591b4b4aa3f5c65f24b48f46);\n",
       "        });\n",
       "    </script>\n"
      ],
      "text/plain": [
       "<pyecharts.render.display.HTML at 0x7f5ec81aa9b0>"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "c4 = (\n",
    "    Liquid()\n",
    "    .add(\"lq\", [0.3, 0.7], is_outline_show=False, shape=SymbolType.DIAMOND)\n",
    "    .set_global_opts(title_opts=opts.TitleOpts(title=\"Liquid-Shape-Diamond\"))\n",
    "    #.render(\"liquid_shape_diamond.html\")\n",
    ")\n",
    "c4.load_javascript()\n",
    "c4.render_notebook()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 方形样式"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts':'https://assets.pyecharts.org/assets/echarts.min', 'echarts-liquidfill':'https://assets.pyecharts.org/assets/echarts-liquidfill.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "\n",
       "        <div id=\"f177d16d66b84797a315ce483bff6d79\" style=\"width:900px; height:500px;\"></div>\n",
       "\n",
       "<script>\n",
       "        require(['echarts', 'echarts-liquidfill'], function(echarts) {\n",
       "                var chart_f177d16d66b84797a315ce483bff6d79 = echarts.init(\n",
       "                    document.getElementById('f177d16d66b84797a315ce483bff6d79'), 'white', {renderer: 'canvas'});\n",
       "                var option_f177d16d66b84797a315ce483bff6d79 = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\"\n",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"liquidFill\",\n",
       "            \"name\": \"lq\",\n",
       "            \"data\": [\n",
       "                0.3,\n",
       "                0.7\n",
       "            ],\n",
       "            \"waveAnimation\": true,\n",
       "            \"animationDuration\": 2000,\n",
       "            \"animationDurationUpdate\": 1000,\n",
       "            \"color\": [\n",
       "                \"#294D99\",\n",
       "                \"#156ACF\",\n",
       "                \"#1598ED\",\n",
       "                \"#45BDFF\"\n",
       "            ],\n",
       "            \"shape\": \"rect\",\n",
       "            \"backgroundStyle\": {},\n",
       "            \"outline\": {\n",
       "                \"show\": false,\n",
       "                \"borderDistance\": 8\n",
       "            },\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"inside\",\n",
       "                \"margin\": 8,\n",
       "                \"fontSize\": 50\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [],\n",
       "            \"selected\": {},\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Liquid-Shape-rect\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_f177d16d66b84797a315ce483bff6d79.setOption(option_f177d16d66b84797a315ce483bff6d79);\n",
       "        });\n",
       "    </script>\n"
      ],
      "text/plain": [
       "<pyecharts.render.display.HTML at 0x7f5ec8cf66d8>"
      ]
     },
     "execution_count": 8,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "c5 = (\n",
    "    Liquid()\n",
    "    .add(\"lq\", [0.3, 0.7], is_outline_show=False, shape=SymbolType.RECT)\n",
    "    .set_global_opts(title_opts=opts.TitleOpts(title=\"Liquid-Shape-rect\"))\n",
    "    #.render(\"liquid_shape_rect.html\")\n",
    ")\n",
    "c5.load_javascript()\n",
    "c5.render_notebook()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 无边框圆样式"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts':'https://assets.pyecharts.org/assets/echarts.min', 'echarts-liquidfill':'https://assets.pyecharts.org/assets/echarts-liquidfill.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "\n",
       "        <div id=\"53af51e9e6bc40b2b2f0dd4f42715a4a\" style=\"width:900px; height:500px;\"></div>\n",
       "\n",
       "<script>\n",
       "        require(['echarts', 'echarts-liquidfill'], function(echarts) {\n",
       "                var chart_53af51e9e6bc40b2b2f0dd4f42715a4a = echarts.init(\n",
       "                    document.getElementById('53af51e9e6bc40b2b2f0dd4f42715a4a'), 'white', {renderer: 'canvas'});\n",
       "                var option_53af51e9e6bc40b2b2f0dd4f42715a4a = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\"\n",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"liquidFill\",\n",
       "            \"name\": \"lq\",\n",
       "            \"data\": [\n",
       "                0.6,\n",
       "                0.7,\n",
       "                0.8\n",
       "            ],\n",
       "            \"waveAnimation\": true,\n",
       "            \"animationDuration\": 2000,\n",
       "            \"animationDurationUpdate\": 1000,\n",
       "            \"color\": [\n",
       "                \"#294D99\",\n",
       "                \"#156ACF\",\n",
       "                \"#1598ED\",\n",
       "                \"#45BDFF\"\n",
       "            ],\n",
       "            \"shape\": \"circle\",\n",
       "            \"backgroundStyle\": {},\n",
       "            \"outline\": {\n",
       "                \"show\": false,\n",
       "                \"borderDistance\": 8\n",
       "            },\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"inside\",\n",
       "                \"margin\": 8,\n",
       "                \"fontSize\": 50\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [],\n",
       "            \"selected\": {},\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Liquid-\\u65e0\\u8fb9\\u6846\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_53af51e9e6bc40b2b2f0dd4f42715a4a.setOption(option_53af51e9e6bc40b2b2f0dd4f42715a4a);\n",
       "        });\n",
       "    </script>\n"
      ],
      "text/plain": [
       "<pyecharts.render.display.HTML at 0x7f5ec8225f98>"
      ]
     },
     "execution_count": 9,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "c6 = (\n",
    "    Liquid()\n",
    "    .add(\"lq\", [0.6, 0.7, 0.8], is_outline_show=False)\n",
    "    .set_global_opts(title_opts=opts.TitleOpts(title=\"Liquid-无边框\"))\n",
    "    #.render(\"liquid_without_outline.html\")\n",
    ")\n",
    "c6.load_javascript()\n",
    "c6.render_notebook()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 多个 Liquid 显示 "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/composite_charts/grid.py:17: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts':'https://assets.pyecharts.org/assets/echarts.min', 'echarts-liquidfill':'https://assets.pyecharts.org/assets/echarts-liquidfill.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "\n",
       "        <div id=\"022d979a1d8b40779a185d5cf0a4565a\" style=\"width:900px; height:500px;\"></div>\n",
       "\n",
       "<script>\n",
       "        require(['echarts', 'echarts-liquidfill'], function(echarts) {\n",
       "                var chart_022d979a1d8b40779a185d5cf0a4565a = echarts.init(\n",
       "                    document.getElementById('022d979a1d8b40779a185d5cf0a4565a'), 'white', {renderer: 'canvas'});\n",
       "                var option_022d979a1d8b40779a185d5cf0a4565a = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\"\n",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"liquidFill\",\n",
       "            \"name\": \"lq\",\n",
       "            \"data\": [\n",
       "                0.6,\n",
       "                0.7\n",
       "            ],\n",
       "            \"waveAnimation\": true,\n",
       "            \"animationDuration\": 2000,\n",
       "            \"animationDurationUpdate\": 1000,\n",
       "            \"color\": [\n",
       "                \"#294D99\",\n",
       "                \"#156ACF\",\n",
       "                \"#1598ED\",\n",
       "                \"#45BDFF\"\n",
       "            ],\n",
       "            \"shape\": \"circle\",\n",
       "            \"backgroundStyle\": {},\n",
       "            \"outline\": {\n",
       "                \"show\": true,\n",
       "                \"borderDistance\": 8\n",
       "            },\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"inside\",\n",
       "                \"margin\": 8,\n",
       "                \"fontSize\": 50\n",
       "            },\n",
       "            \"center\": [\n",
       "                \"60%\",\n",
       "                \"50%\"\n",
       "            ],\n",
       "            \"xAxisIndex\": 0,\n",
       "            \"yAxisIndex\": 0\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"liquidFill\",\n",
       "            \"name\": \"lq\",\n",
       "            \"data\": [\n",
       "                0.3254\n",
       "            ],\n",
       "            \"waveAnimation\": true,\n",
       "            \"animationDuration\": 2000,\n",
       "            \"animationDurationUpdate\": 1000,\n",
       "            \"color\": [\n",
       "                \"#294D99\",\n",
       "                \"#156ACF\",\n",
       "                \"#1598ED\",\n",
       "                \"#45BDFF\"\n",
       "            ],\n",
       "            \"shape\": \"circle\",\n",
       "            \"backgroundStyle\": {},\n",
       "            \"outline\": {\n",
       "                \"show\": true,\n",
       "                \"borderDistance\": 8\n",
       "            },\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"inside\",\n",
       "                \"margin\": 8,\n",
       "                \"fontSize\": 50,\n",
       "                \"formatter\": function (param) {                    return (Math.floor(param.value * 10000) / 100) + '%';                }\n",
       "            },\n",
       "            \"center\": [\n",
       "                \"25%\",\n",
       "                \"50%\"\n",
       "            ],\n",
       "            \"xAxisIndex\": 1,\n",
       "            \"yAxisIndex\": 1\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [],\n",
       "            \"selected\": {},\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        },\n",
       "        {\n",
       "            \"data\": [],\n",
       "            \"selected\": {}\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"\\u591a\\u4e2a Liquid \\u663e\\u793a\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        },\n",
       "        {\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ],\n",
       "    \"grid\": [\n",
       "        {\n",
       "            \"show\": false,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"containLabel\": false,\n",
       "            \"backgroundColor\": \"transparent\",\n",
       "            \"borderColor\": \"#ccc\",\n",
       "            \"borderWidth\": 1\n",
       "        },\n",
       "        {\n",
       "            \"show\": false,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"containLabel\": false,\n",
       "            \"backgroundColor\": \"transparent\",\n",
       "            \"borderColor\": \"#ccc\",\n",
       "            \"borderWidth\": 1\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_022d979a1d8b40779a185d5cf0a4565a.setOption(option_022d979a1d8b40779a185d5cf0a4565a);\n",
       "        });\n",
       "    </script>\n"
      ],
      "text/plain": [
       "<pyecharts.render.display.HTML at 0x7f5ec819af60>"
      ]
     },
     "execution_count": 11,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from pyecharts.commons.utils import JsCode\n",
    "from pyecharts.charts import Grid\n",
    "\n",
    "l1 = (\n",
    "    Liquid()\n",
    "    .add(\"lq\", [0.6, 0.7], center=[\"60%\", \"50%\"])\n",
    "    .set_global_opts(title_opts=opts.TitleOpts(title=\"多个 Liquid 显示\"))\n",
    ")\n",
    "\n",
    "l2 = Liquid().add(\n",
    "    \"lq\",\n",
    "    [0.3254],\n",
    "    center=[\"25%\", \"50%\"],\n",
    "    label_opts=opts.LabelOpts(\n",
    "        font_size=50,\n",
    "        formatter=JsCode(\n",
    "            \"\"\"function (param) {\n",
    "                    return (Math.floor(param.value * 10000) / 100) + '%';\n",
    "                }\"\"\"\n",
    "        ),\n",
    "        position=\"inside\",\n",
    "    ),\n",
    ")\n",
    "\n",
    "grid = Grid().add(l1, grid_opts=opts.GridOpts()).add(l2, grid_opts=opts.GridOpts())\n",
    "#grid.render(\"multiple_liquid.html\")\n",
    "grid.load_javascript()\n",
    "grid.render_notebook()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
